<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <view :class="currentTabComponent==='shop'?'action-item text-pink':'action-item'" @click="currentTabComponent='shop'">
          <view class="cuIcon-list icon"></view>
          <text class="text">店铺列表</text>
        </view>
        <view :class="currentTabComponent==='apply'?'action-item text-blue':'action-item'" @click="currentTabComponent='apply'">
          <view class="cuIcon-brand icon"></view>
          <text class="text">店铺审核</text>
        </view>
        <view :class="currentTabComponent==='settle'?'action-item text-mauve':'action-item'" @click="currentTabComponent='settle'">
          <view class="cuIcon-moneybag icon"></view>
          <text class="text">店铺结算</text>
        </view>
        <view :class="currentTabComponent==='billing'?'action-item text-green':'action-item'" @click="currentTabComponent='billing'">
          <view class="cuIcon-read icon"></view>
          <text class="text">商家对账</text>
        </view>
      </view>
    </view>
    <view class="content-section">
<!--      <keep-alive>手机端报错:[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read property '_i' of undefined"-->
        <component :is="currentTabComponent"></component>
<!--      </keep-alive>-->
    </view>
  </view>
</template>

<script>
import UniGroup from "../../../../uni_modules/uni-group/components/uni-group/uni-group";
import UniRow from "../../../../uni_modules/uni-row/components/uni-row/uni-row";
import apply from "@/pages/mine/shop/manage/apply/index";
import billing from "@/pages/mine/shop/manage/billing/index";
import shop from "@/pages/mine/shop/manage/shop/index";
import settle from "@/pages/mine/shop/manage/settle/index";

export default {
  components: {UniRow, UniGroup,apply,billing,shop,settle},
  data() {
    return {
      currentTabComponent: "shop",
    }
  },
  computed: {
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    }
  },
  methods: {}
}
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.content-section {
  position: relative;

  .mine-actions {
    background-color: transparent;
    padding-top: 10px;
    .action-item {
      .icon {
        font-size: 28px;
      }

      .text {
        display: block;
        font-size: 13px;
        margin: 8px 0px;
      }
    }
  }
}
</style>
